<template>
    <div class="c-back-img" v-bind:style="{height: pageHeight,'background-image': skin.url}">

        <!--顶部功能-->
        <div id="info">
            <span>{{currentTime}}</span>
            <span @click="versionInfo = true">版本信息</span>
            <span @click="waringInfo = true">下载App</span>
            <span @click="waringInfo = true">设置</span>
            <span @click="contactVisible = true">联系管理员</span>
            <span @click="skinVisible = true">更换皮肤</span>
        </div>

        <!--LOGO-->
        <div id="logo">

        </div>

        <!--日历-->
        <div id="calendar-panel" v-show="false">
            <elcalendar></elcalendar>
        </div>

        <!--左侧功能栏-->
        <div id="left-bar" v-bind:style="{height: pageHeight}">
            <span></span>
            <el-tooltip class="item" effect="dark" content="版本信息" placement="left">
                <span class="bar-item" @click="versionInfo = true"><i class="el-icon-cxl el-icon-cxl-banben"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="下载App" placement="left">
                <span class="bar-item" @click="waringInfo = true"><i class="el-icon-cxl el-icon-cxl-banben1"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="设置" placement="left">
                <span class="bar-item" @click="waringInfo = true"><i class="el-icon-cxl el-icon-cxl-shezhi2"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="联系管理员" placement="left">
                <span class="bar-item" @click="contactVisible = true"><i class="el-icon-cxl el-icon-cxl-fankui"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="更换皮肤" placement="left">
                <span class="bar-item" @click="skinVisible = true"><i class="el-icon-cxl el-icon-cxl-pifu"></i></span>
            </el-tooltip>
        </div>

        <!--信息框-->
        <div id="message" v-show="message.show">
            <span id="message-title">{{message.title}}</span>
            <span id="message-sub-title">{{message.sub}}</span>
            <span id="download" @click="waringInfo = true">Learning more > </span>
        </div>

        <!--登录框-->
        <div id="box" @keyup.enter="login">
            <span id="title">欢迎登录</span>
            <span>
                <label>
                    <span>用户名：</span>
                    <i class="el-icon-cxl-zhanghao login-icon"></i>
                    <input type="text" v-model="userAccount" placeholder="请输入用户名"/>
                </label>
            </span>
            <span>
                <label>
                    <span>密码：</span>
                    <i class="el-icon-cxl-mima login-icon"></i>
                    <input type="password" v-model="userPassword" placeholder="请输入密码"/>
                </label>
            </span>
            <transition name="el-zoom-in-top">
                <span id="identifyingCode" v-show="identifyingCodeShow">
                    <label>
                        <span>验证码：</span>
                        <i class="el-icon-cxl-yanzhengma login-icon"></i>
                        <input type="text" v-model="userCode" placeholder="验证码"/>
                    </label>
                    <elidentifycode :identifyCode="identifyingCode"></elidentifycode>
                    <i class="el-icon-cxl-shuaxin refresh-icon" @click="refreshCode" title="刷新验证码"></i>
                </span>
            </transition>
            <span id="remember"><el-checkbox v-model="remember" @change="clickAuto(1)">记住密码</el-checkbox></span>
            <span id="autoLogin"><el-checkbox v-model="autoLogin" @change="clickAuto(2)">7天内自动登录</el-checkbox></span>
            <span id="submit" @click="login"><button>登&nbsp;&nbsp;&nbsp;录</button></span>
            <span id="other" v-show="otherShow">没有账号？<a href="javascript:" @click="waringInfo = true">立即注册</a>&nbsp;&nbsp;<a href="javascript:" @click="waringInfo = true">忘记密码？</a></span>
        </div>

        <!--页脚-->
        <div id="footer" v-bind:style="{width: pageWidth}">
            <span>Copyright © 东臣科技, All Rights Reserved.</span>
        </div>

        <el-dialog title="提示" :visible.sync="waringInfo" width="30%">
            <span>{{waringInfoText}}</span>
        </el-dialog>

        <el-dialog title="版本信息" :visible.sync="versionInfo" width="30%">
            <span>{{versionInfoText}}</span>
        </el-dialog>

        <elcontactme v-on:overContact="contactVisible = false" :contactVisible="contactVisible" module="登录页面"></elcontactme>

        <elloginskin v-on:overSkin="skinVisible = false" :skin="skin" v-on:changeSkin="changeSkin" :skinVisible="skinVisible" ></elloginskin>

    </div>
</template>

<script>

    // import {ajax} from '@/util/HttpUtil';
    import {baseUtil} from '@/util/BaseUtil';
    import elcontactme from "@/components/el-contact-me";
    // 使用验证码
    import elidentifycode from '@/components/el-identify-code'
    // 更换皮肤
    import elloginskin from "@/components/el-login-skin";
    // 日历组件
    import elcalendar from "@/components/el-calendar";

    export default {
        components: {
            elcontactme,
            elidentifycode,
            elloginskin,
            elcalendar,
        },
        name: "Login",
        data() {
            return {
                baseUtil : baseUtil,
                verification : baseUtil.getVerification(),
                info : baseUtil.getInfo(),
                message:{
                    show: false,
                    title: "",
                    sub: "",
                    array: [
                        {title: "努力让自己多一点如心所愿，少一些己所不愿", sub: "Promise yourself to dream more and hesitate less."},
                        {title: "珍视家庭和朋友，他们为你的生命增添光彩", sub: "To appreciate your family and friends for all the wonderful ways they make your life better."},
                        {title: "独立自强，乐于应对生活的变化", sub: "To become more independent and more willing to change."},
                        {title: "怎样才能找回孩提时代的热情呢？", sub: "The answer, I believe, lies in the word itself."},
                        {title: "遇见最美的自己", sub: "To meeting the most beautiful yourself."},
                        {title: "承蒙你的出现，狗窝喜欢好几年", sub: "Thank you for your appearance, enough for me to like for several years."},
                    ]
                },
                // 页面尺寸信息
                pageHeight: window.innerHeight + 'px',
                pageWidth: window.innerWidth + 'px',

                userAccount: "",
                userPassword: "",
                userCode:"",

                identifyingCode: "",
                identifyingCodes: "",
                identifyingCodeShow: false,
                identifyingIndex: [],
                identifyingLength: 4,

                remember: false,
                autoLogin: false,

                otherShow: true,

                versionInfo: false,
                // versionInfoText: "ver1.0 Redefine研发团队欢迎您的使用",
                versionInfoText: "开发中啊...",

                waringInfo: false,
                waringInfoText: "功能暂未上线",

                // 显示联系管理员面板
                contactVisible: false,

                // 当前时间
                currentTime : '',

                // 显示更换皮肤页面
                skinVisible :false,
                skin : {},
            }
        },
        methods: {
            clickAuto(type) {
                if(type === 1) {
                    if(!this.remember) {
                        this.autoLogin = this.remember;
                    }
                }else {
                    if(this.autoLogin) {
                        this.remember = this.autoLogin;
                    }
                }
            },
            loginLoading() {
                return this.$loading({
                    lock: true,
                    text: '登录中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
            },
            login() {
                let loginCount = this.$cookies.get("redefine_login_count") || 0;
                let loginErrorCount = this.$cookies.get("redefine_login_error_count") || 0;
                loginCount++;
                let loading = this.loginLoading();

                if(this.verification.isNull(this.userAccount)) {
                    this.info.warning(this, "用户名不能为空");
                    loading.close();
                    return;
                }

                if(this.verification.isNull(this.userPassword)) {
                    this.info.warning(this, "密码不能为空");
                    loading.close();
                    return;
                }

                let params = {
                    account : this.userAccount,
                    password : this.userPassword,
                    identifyCode : this.userCode
                };

                // 验证码使用了
                if(this.identifyingCodeShow) {
                    let code1 = this.userCode;
                    let code2 = this.identifyingCode;
                    if(code1.toLowerCase() !== code2.toLowerCase()) {
                        this.info.warning(this, "验证码输入错误");
                        loading.close();
                        return;
                    }
                    params['array'] = this.identifyingIndex.join(",");
                }

                // 请求
                this.baseUtil.ajaxPost(this, '/login', params, (response) => {
                    // 登录次数加1
                    this.$cookies.set("redefine_login_count", loginCount, 60 * 60 * 24 * 7);
                    if(response.success) {
                        // 确认已经登录过了
                        this.$cookies.set("redefine_is_login", true);
                        // this.$cookies.set("redefine_login_error_count", 0, 60 * 60 * 24 * 7);
                        // 将用户信息放入
                        // 登录成功之后将值放入cookie
                        if(this.remember || this.autoLogin) {
                            this.$cookies.set("redefine_account", this.userAccount, 60 * 60 * 24 * 7);
                            this.$cookies.set("redefine_password", this.userPassword, 60 * 60 * 24 * 7);
                            this.$cookies.set("redefine_remember", this.remember, 60 * 60 * 24 * 7);
                            this.$cookies.set("redefine_auto_login", this.autoLogin, 60 * 60 * 24 * 7);
                        }
                        if(!this.remember) {
                            this.$cookies.set("redefine_account", "", 60 * 60 * 24 * 7);
                            this.$cookies.set("redefine_password", "", 60 * 60 * 24 * 7);
                            this.$cookies.set("redefine_remember", this.remember, 60 * 60 * 24 * 7);
                            this.$cookies.set("redefine_auto_login", this.autoLogin, 60 * 60 * 24 * 7);
                        }
                        this.info.success(this, response.message);
                        this.$cookies.set("redefine_user_info", response.data);
                        // 路由跳转
                        this.$router.push({ name: 'home'});
                    }else {
                        this.info.error(this, response.message);
                        loginErrorCount++;
                        // 显示验证码
                        this.identifyingCodeShow = loginErrorCount >= 3;
                        if(this.identifyingCodeShow){
                            // 账号密码错了，更新验证码
                            this.identifyingCodes = response.data;
                            this.randomCode();
                        }
                        this.$cookies.set("redefine_login_error_count", loginErrorCount, 60 * 60 * 24);
                    }
                    loading.close();
                });
            },
            // 随机显示一条页面信息
            randomMessage() {
                if(this.message.array.length === 0) {
                    this.message.show = false;
                    return;
                }
                let index = parseInt(Math.random() * 100) % this.message.array.length;
                this.message.title = this.message.array[index].title;
                this.message.sub = this.message.array[index].sub;
                this.message.show = true;
            },
            // 根据字符串生成验证码
            randomCode() {
                this.identifyingCode = "";
                this.identifyingIndex = [];
                this.userCode = "";
                for(let i = 0; i < this.identifyingLength; i++) {
                    let index = parseInt(Math.random() * 1000) % this.identifyingCodes.length;
                    this.identifyingIndex.push(index);
                    this.identifyingCode += "" + this.identifyingCodes.charAt(index);
                }
                // console.log(this.identifyingCode, this.identifyingIndex);
            },
            // 刷新验证码
            refreshCode() {
                this.randomCode(this.identifyingLength)
            },
            // 循环计算时间
            refreshTime() {
                let loop = setInterval(() => {
                    this.currentTime = this.baseUtil.formatDate(null, 'YYYY年MM月DD日 HH:mm:ss');
                }, 1000);
            },
            changeSkin(skin) {
                this.skin = skin;
            }
        },
        created() {
            // 获取图片信息
            this.skin = this.$cookies.get("redefine_skin") || {
                skinId: 1,
                path : 'https://chenxueli.oss-cn-hangzhou.aliyuncs.com/skin/skin_01.png',
                url: "url('https://chenxueli.oss-cn-hangzhou.aliyuncs.com/skin/skin_01.png')",
                visible : false
            };
            this.$cookies.set("redefine_skin", this.skin, 60 * 60 * 24 * 30);
        },
        mounted() {
            this.refreshTime();

            window.onresize = () => {
                this.pageHeight = window.innerHeight + 'px';
                this.pageWidth = window.innerWidth + 'px';
            };

            this.randomMessage();
            let isLogin = this.$cookies.get("redefine_is_login");
            let remember = this.$cookies.get("redefine_remember");
            let auto = this.$cookies.get("redefine_auto_login");
            let account = this.$cookies.get("redefine_account");
            let password = this.$cookies.get("redefine_password");
            this.remember = remember === "true";
            this.autoLogin =  auto === "true";
            this.userAccount = account;
            this.userPassword = password;
            // 没有登录过的，确定自动登录
            if(!isLogin && auto) {
                this.login();
            }
        }
    }
</script>

<style lang="scss" scoped>

    *{
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
        -khtml-user-select: none; /* Konqueror */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently not supported by any browser */
    }

    #info{
        position: absolute;
        right: 50px;
        top: 10px;

        &>span{
            color: black;
            display: inline-block;
            margin: 0 10px;
            cursor: pointer;
            font-size: 14px;

            &:hover{
                border-bottom: 1px #606266 solid;
            }
        }

    }

    #message{
        position: absolute;
        left: 245px;
        top: 65%;
        margin-top: -100px;

        height: 200px;
        /*border: 1px black solid;*/
        border-left: 5px #606266 solid;

        &>span{
            text-align: left;
            display: block;
            color: black;
            margin-left: 22px;
        }

        #message-title{
            font-size: 45px;
            line-height: 90px;
        }

        #message-sub-title,#download{
            line-height: 60px;
            font-size: 30px;
            font-family: "Franklin Gothic Medium Cond";
        }

        #download{
            color: blanchedalmond;
            cursor: pointer;
        }

        animation: messageMove 5s;
        -webkit-animation: messageMove 5s; /*Safari and Chrome*/
    }

    @keyframes messageMove {
        from {left:-245px;opacity:0.0;}
        to {left:245px;opacity:1;}
    }

    /*Safari and Chrome*/
    @-webkit-keyframes messageMove {
        from {left:-245px;opacity:0.0;}
        to {left:245px;opacity:1;}
    }

    #box{
        position: absolute;
        top: 50%;
        margin-top: -300px;
        right: 150px;
        width: 500px;
        height: 600px;
        border-radius: 10px;
        background-color: rgba(230, 230, 230, 0.2);
        box-shadow: 5px 5px 5px #888888;
        text-align: center;

        label{
            position: relative;
        }

        .login-icon{
            position: absolute;
            z-index:5;
            top: 3px;
            left: 148px;
            font-size: 24px;
            font-weight: bold;
            color: #606266;
            padding-right: 3px;
            border-right: 2px #606266 solid;
        }

        &>span{
            display: block;
            height: 45px;
            font-size: 24px;
            margin: 32px 0;
            color: black;

            span{
                display: inline-block;
                width: 25%;
                text-align: right;
                line-height: 45px;
            }
        }
        input{
            height: 45px;
            width: 60%;
            border-radius: 20px;
            font-size: 20px;
            text-indent: 56px;
            line-height: 40px;
            border: 0;
            padding: 0;
            color: #475c6c;
            background-color: rgba(255, 255, 255, 0.3);
            transition: background-color 0.4s, color 0.4s;

            /*cursor: pointer;*/
            &:hover{
                background-color: rgba(255, 255, 255, 0.5);
                color: black;
            }
            &:focus{
                background-color: rgba(255, 255, 255, 0.8);
                cursor: text;
            }
        }

        #identifyingCode{
            margin-bottom: 15px;

            input{
                width: 30%;
                /*text-align: center;*/
            }

            .refresh-icon{
                font-weight: bold;
                cursor: pointer;
                vertical-align: bottom;
                display: inline-block;
                width: 5%;
            }
        }

        #remember,#autoLogin{
            display: inline-block;
            margin: 0 70px;
            height: auto;
        }

        #submit{
            margin-top: 20px;

            button{
                width: 75%;
                height: 60px;
                cursor: pointer;
                border-radius: 20px;
                border: none;
                background-color: rgba(240, 236, 163, 0.5);
                color: white;
                font-size: 32px;
                line-height: 60px;
                text-align: center;
                transition: background-color 0.4s, color 0.4s;

                &:hover,&:focus{
                    color: black;
                    background-color: rgba(240, 236, 163, 1);
                    /*background-color: rgba(60, 190, 240,0.8);*/
                }

                &:focus{
                    outline: none;
                    border: 0;
                }

            }
        }

        #title{
            font-size: 60px;
            height: 60px;
            line-height: 60px;
            font-weight: bold;
        }

        #other{
            position: absolute;
            bottom: -50px;
            width: 500px;
            text-align: center;
            font-size: 14px;

            a{
                text-decoration: none
            }
        }
        animation: boxMove 2s;
        -webkit-animation: boxMove 2s; /*Safari and Chrome*/
    }

    @keyframes boxMove {
        from {top:-50%;opacity:0.0;}
        to {top:50%;opacity:1;}
    }

    /*Safari and Chrome*/
    @-webkit-keyframes boxMove {
        from {top:-50%;opacity:0.0;}
        to {top:50%;opacity:1;}
    }

    input:-webkit-autofill,select:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px white  inset !important;
    }

    input{
        outline-color: invert ;
        outline-style: none ;
        outline-width: 0 ;
        border: none ;
        border-style: none ;
        text-shadow: none ;
        -webkit-appearance: none ;
        -webkit-user-select: text ;
        outline-color: transparent ;
        box-shadow: none;
    }

    .c-back-img{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: url("../assets/img/login_background_img.jpg") no-repeat center center;
        /*background-image: url("../assets/img/login_background_img.jpg");*/
        background-size: cover;
        /*background-position: center center;*/
        /*background-repeat: no-repeat;*/
        background-attachment: fixed;
        overflow: hidden;

        transition: background-image 0.5s;
    }

    #left-bar{
        position: absolute;
        top: 0;
        left: -40px;
        width: 50px;
        background-color: rgba(255, 255, 255, 0.1);

        transition: left 0.5s;

        &>span{
            display: block;
            margin: 10px 0;
            height: 50px;
        }

        &>span.bar-item{
            display: block;
            cursor: pointer;
            margin: 10px 0;
            height: 50px;
            font-size: 30px;
            text-align: center;
            line-height: 45px;
            color: black;
            font-weight: bold;

            transition: background-color 0.5s, color 0.5s;

            &:hover{
                background-color: rgba(0, 0, 0, 0.2);
                color : blueviolet;
            }
        }

        &:hover{
            left: 0;
            background-color: rgba(255, 255, 255, 0.6);
        }

    }

    #calendar-panel{
        position: absolute;
        top : 10%;
        left: 245px;
        width: 600px;
    }

    #footer{
        color: black;
        position: absolute;
        bottom: 10px;
        text-align: center;
    }

</style>
